<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化思维</title>
</head>

<body>
    <script src="/js/vue.js"></script>
    <div id="app">
        <!-- 什么是组件？ 什么是组件化思维？-->
        <!-- 把问题进行拆解吗，如果能将一个复杂的问题拆解成很多个可以处理的小问题，再将其放在整体中，这些问题可以快去解决 -->
        <!-- 组件化是vue重要的一种思维方式
        它提供了一种抽象的，让我们可以开发一个个独立的可以复用的小组件来构造我们的应用，同时增加管理的扩展性
        任何应用都会被抽象成一颗组件树
        -->

        <!-- 第三步：使用组件，必须在vue实例范围内 -->
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
    </div>

    <!-- <my-cpn></my-cpn> 不起效果 -->

    <!-- 组件树
    <组件1>
        <组件2>
            <组件4>

            </组件4>
        </组件2>
        <组件3>

        </组件3>
    </组件1> -->

    <script>
        // 注册组件的基本步骤
        // 组件的使用分成三个步骤
        // 第一步： 创建组件构造器 Vue.extend()  extends继承
        //  调用创建构造器函数，传入template代表了我们自定义组件，显示HTML代码
        const cpnConstructor = Vue.extend({
            // 键值对
            template: `
                <div>
                    <h2>组件中的标题</h2>
                    <p>组件中的内容</p>
                    <button>button</button>
                </div>
            `
        })

        // // es6
        // class Person {}

        // class Boy extends Person {

        // }

        // 第二步： 注册组件 Vue.component()
        Vue.component('my-cpn'/*组件标签名*/,cpnConstructor/*组件构造器实例*/)

        let app = new Vue({
            el: "#app",
            data: {
                msg: 'hello world'
            }
        })
    </script>
</body>

</html>